<template>
  <div id="app">
    <van-nav-bar
      v-show="$store.state.topFlag"
      :title="$store.state.title"
      left-text
      left-arrow
      @click-left="onClickLeft"
    />
    <transition>
      <keep-alive include exclude>
        <router-view v-if="$route.meta.keepAlive"></router-view>
        <!--这里是会被缓存的组件-->
      </keep-alive>
    </transition>
    <transition>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>

    <van-tabbar
      v-show="$store.state.bottomFlag"
      v-model="$store.state.active"
      active-color="#e54847"
      inactive-color="#000"
    >
      <van-tabbar-item to="/movie/hot">
        <van-icon name="play-circle-o" />
        <span>电影</span>
      </van-tabbar-item>
      <van-tabbar-item to="/cinema">
        <van-icon name="tv-o" />
        <span>影院</span>
      </van-tabbar-item>
      <van-tabbar-item :to="$store.state.isLogin?'/account/mycenter':'/account/login'">
        <van-icon name="contact" />
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data: () => ({
    icon: {
      active: 'https://img.yzcdn.cn/vant/user-active.png',
      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
    }
  }),
  created () {
    this.$store.state.bottomFlag = true
    this.$store.state.topFlag = true
    if (localStorage.getItem('users')) {
      this.$store.state.isLogin = true
    } else {
      this.$store.state.isLogin = false
    }

    // this.$store.dispatch('changeActive', this.$route.path)
  },
  mounted () {
    // document.getElementById('#app').style.height = document.documentElement.clientHeight + 'px'
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    gocinemalist () {}
  }
}
</script>
<style lang="less" scoped>
#app {
  overflow-x: hidden;
  margin-bottom: 50px;
  height: 100%;
  .van-nav-bar {
    height: 50px;
    line-height: 50px;
    background: #e54847;
    .van-icon-arrow-left {
      color: white;
      font-size: 28px;
      font-weight: normal;
      right: 5px;
    }
    .van-nav-bar__title {
      color: #fff;
      font-size: 18px;
      font-weight: normal;
    }
  }
  .van-tabbar-item__text {
    position: flex;
    flex-flow: column;
    span {
      display: block;
    }
    i {
      font-size: 24px;
    }
  }
  .v-enter {
    transform: translateX(100%);
  }
  .v-leave-to {
    transform: translateX(-100%);
    position: absolute;
    left: -300%;
  }
  .v-leave-active,
  .v-enter-active {
    transition: all 0.4s ease;
  }
}
</style>
